import React from 'react';
import styles from '@/assets/css/detail.module.css';
import { sleep } from 'antd-mobile/es/utils/sleep';
import type comment from "@/typeof/comment";

const HotelRate = () => {

    const [ searchParams ] = useSearchParams();
    const [ roomid ] = React.useState(searchParams.get('roomid') ?? 0)
    const [ RoomDetail, SetInfo ] = React.useState<any>({flag_text: []})
    const [ CommentList,SetCommentList ] = useState<comment[]>([]);
    const [ hasMore, SethasMore ] = React.useState(false);
    const [ page, SetPage ] = React.useState(1);

    React.useEffect(() => 
    {
        GetRoomInfoData();
        GetRateListData();
    }, []);

    const GetRoomInfoData = async () => 
    {
        const result = await React.Http.post('/room/info', {
            roomid: roomid
        })

        if (result && result.code == 1) 
        {
            SetInfo(result.data.room);
            SetCommentList(result.data.CommentList);
        }else{
            React.fail(result.msg,() => {
                React.navigate(-1);
            });
        }
    }

    //下拉刷新
    const OnRefresh = async () => 
    {
        SetPage(1)
        SethasMore(true);
        SetCommentList([]);

        await sleep(1000);
        await GetRateListData();
    };

    // 上拉加载
    const OnLoad = async () => 
    {
        await sleep(1000)
        GetRateListData()
    }

    const GetRateListData = async() =>
    {
        const result = await React.Http.post('/room/commentlist', {
            page: page,
            roomid: roomid
        })

        if(result.code == 0)
        {
            SethasMore(false)
            return false
        }else{
            SethasMore(true)
            SetPage(page + 1)
            SetCommentList(CommentList.concat(result.data))
        }
    }

    return(
        <>
            <React.UI.Image src={RoomDetail.thumb_text} height={213} fit='cover' />

            <div className={styles.detail_top}>
                <div id="intro" className={styles.intro}>
                    <div className={styles.title}>{RoomDetail.name}</div>
                    <div className={styles.betwee}>
                        <div className={styles.left}>
                            {
                                RoomDetail.flag_text.map((item: string, index: number) =>{
                                    return(
                                        <span key={index}>{item}</span>
                                    )
                                })
                            }
                        </div>
                    </div>
                    <div className={styles.title}>{RoomDetail.content}</div>
                </div>


                {/* 评价 */}
                <div id="comment" className={styles.comment}>
                    <div className={styles.title}>评价</div>
                    <React.UI.List style={{ '--border-top': '0', '--border-bottom': '0' }}>
                        <React.UI.PullToRefresh onRefresh={OnRefresh}>
                            {CommentList && CommentList.map((item:any) => (
                                <div className={styles.rate_list_item} key={item.id}>
                                    <div className={styles.item_content}>
                                        <div className={styles.content_prefix}>
                                            <div className={styles.ratelist}>
                                                <div className={styles.image}>
                                                    <img src={item.business.avatar_text} alt="" />
                                                </div>
                                                <p className={styles.nickname}>{item.business.nickname}</p>
                                            </div>
                                        </div>
                                        <div className={styles.content_main}>
                                            <div className={styles.rate}>
                                                <React.UI.Rate readOnly value={item.rate} style={{ '--star-size': '18px' }} />
                                            </div>
                                            <div className={styles.item_description}>
                                                <p>{item.content}</p>
                                                <p className={styles.item_time}>{item.createtime_text}</p>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            ))}
                            <React.UI.InfiniteScroll Onload={OnLoad} hasMore={hasMore} threshold={0} />
                        </React.UI.PullToRefresh>
                    </React.UI.List>
                </div>
            </div>
        </>
    )
}

export default HotelRate;